<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useMerchantStore, useBannerStore } from '@/stores';

const categories = ref<any>([]);
const selectedCategoryIndex = ref<any>(0);
const merchants = ref<any>([]);
const merchantStore = useMerchantStore();
const bannerStore = useBannerStore();
const topBanners = ref<any>([]);
const middleBanners = ref<any>([]);

onLoad(async () => {
	categories.value = await merchantStore.getCategories();
	fetchData();
	topBanners.value = (await bannerStore.getBanners({ positionId: 3 })).map((item: any) => {
		return {
			id: item.id,
			url: item.image?.url
		};
	});
	middleBanners.value = (await bannerStore.getBanners({ positionId: 4 })).map((item: any) => {
		return {
			id: item.id,
			url: item.image?.url
		};
	});
});

async function fetchData() {
	merchants.value = await merchantStore.getMerchants({
		categoryId: categories.value[selectedCategoryIndex.value].id
	});
}

function handleSelect(key: number) {
	selectedCategoryIndex.value = key;
	fetchData();
}

function handleSearch() {
	// delete search.value.categoryId;
	fetchData();
}
</script>

<template>
	<view>
		<x-title-bar>
			<view style="padding: 0 32rpx">
				<dlk-position></dlk-position>
			</view>
		</x-title-bar>
		<x-container direction="vertical" min-height="100vh" bg-color="#F2F2F2" padding="24rpx" gap="24rpx">
			<x-swiper :items="topBanners" :height="120"></x-swiper>
			<dlk-search bg-color="#FFFFFF" placeholder="搜索商家名称" @ok="handleSearch"></dlk-search>
			<view class="tabs">
				<template v-for="(category, key) in categories">
					<view class="tab-item" :class="{ actived: key === selectedCategoryIndex }" @tap="handleSelect(key)">{{ category.name }}</view>
				</template>
			</view>
			<x-swiper :items="middleBanners" :height="120"></x-swiper>
			<x-card v-for="merchant in merchants" v-if="merchants.length > 0">
				<x-row :gutter="20">
					<x-col flex="280rpx">
						<x-container direction="vertical" justify="between" height="100%">
							<x-space>
								<x-image width="80rpx" height="80rpx" :src="merchant.cover?.url" :radius="12"></x-image>
								<x-space direction="vertical" :size="14" style="flex: 1">
									<x-text :size="26" bold ellipsis>{{ merchant.name }}</x-text>
									<x-container justify="between" align="center">
										<x-text :size="24" color="#0023AD">{{ merchant.point || '0.0' }}</x-text>
										<x-text :size="24" color="#666666">0.0km</x-text>
										<!-- <x-text :size="20" color="#666666">天河客运站</x-text> -->
									</x-container>
									<x-text :size="24" color="#666666">0条评论</x-text>
									<x-text :size="24" color="#666666">人均￥0</x-text>
								</x-space>
							</x-space>
							<x-space :size="2">
								<x-tag outline>2025年教培最佳</x-tag>
							</x-space>
						</x-container>
					</x-col>
					<x-col flex="auto">
						<x-row justify="between" :gutter="16">
							<x-col :span="8" v-for="product in merchant.products">
								<x-space direction="vertical" :size="10">
									<x-image width="110rpx" height="110rpx" :src="product.cover?.url" :radius="12"></x-image>
									<x-text :size="22" :line-height="28" align="justify" ellipsis>{{ product.name }}</x-text>
									<x-space :size="0" align="end">
										<x-text :size="24" color="#FA5732">￥{{ product.price }}</x-text>
										<!-- <x-text :size="20" color="#999999" line-through>￥{{ product.price }}</x-text> -->
									</x-space>
								</x-space>
							</x-col>
						</x-row>
					</x-col>
				</x-row>
			</x-card>
			<x-container justify="center" padding="100rpx" v-else>
				<x-empty :size="100" title="暂无商家"></x-empty>
			</x-container>
		</x-container>
	</view>
</template>

<style lang="scss" scoped>
.tabs {
	display: flex;
	gap: 20rpx;
}

.tab-item {
	color: #1c1c1c;
	font-size: 24rpx;
	line-height: 48rpx;

	&.actived {
		color: #0023ad;
		font-size: 28rpx;
		position: relative;

		&::after {
			position: absolute;
			content: '';
			height: 4rpx;
			width: 32rpx;
			left: 50%;
			bottom: 0;
			background-color: #0023ad;
			transform: translate(-50%);
		}
	}
}
</style>
